<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1156682_y7tsfj12kx.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body, html {
            height: 100%;
        }

        body {
            font: 18px/1.5em Arial;
            color: #000;
            /*background: url("http://pic1.win4000.com/wallpaper/0/544b36fae2969.jpg") center center no-repeat;*/
            background-size: cover;
        }

        a {
            color: #000;
            /* 取消a标签的下划线 */
            text-decoration: none;
        }

        ul {
            /* 取消列表的点 */
            list-style: none;
        }

        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }


        header {
            height: 50px;
            position: relative;
        }


        header a {
            color: #000;
            border: 1px solid blue;
            border-radius: 50%;
            position: absolute;
            top: 15px;
            right: 20px;
        }

        .demo {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 500px;
            padding: 16px;
            background-color: #fff;
            box-shadow: 0 3px 4px 5px rgba(0, 0, 0, 0.2);
        }

        .demo-login, .demo-register {
            border: 2px solid #345dc2;
        }

        .demo .close {
            position: absolute;
            top: 9px;
            right: -13px;
        }


        .demo ul {
            /*border: 1px solid black;*/
            width: 40%;
            margin: 18px auto;
        }

        .demo ul li:first-child {
            float: left;
            margin: 5px 10px;
            text-align: center;
        }

        .demo ul li:last-child {
            float: right;
            margin: 5px 10px;
            text-align: center;
        }


        .demo li a {
            font-size: 20px;
            color: #666;
        }


        .demo li a.active {
            border-bottom: 3px solid #444;
        }

        .demo .info {
            color: #ff0037;
            font-size: 12px;
            margin: 0 62px;
        }

        .demo .username, .password {
            border: 1px solid #ccc;
            margin: 25px auto;
            width: 370px;
        }


        .demo span {
            display: inline-block;
            margin: 10px 8px;
        }

        .demo .text {
            /* 取消input的最外层框 */
            border: none;
            height: 46px;
            width: 330px;
        }


        .demo input {
            /* outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 */
            outline: medium;
            padding: 5px 12px;
        }

        .demo .input-field {
            width: 50%;
            /*border: 1px solid black;*/
            /*display: inline-block;*/
            background: #fff;
            margin: 0 auto 20px;
            box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
        }

        .demo input[type="submit"] { /* 按钮美化 */
            width: 100%; /* 宽度 */
            height: 100%; /* 高度 */
            border-width: 0; /* 边框宽度 */
            border-radius: 10px; /* 边框半径 */
            background: #1E90FF; /* 背景颜色 */
            cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
            outline: none; /* 不显示轮廓线 */
            color: white; /* 字体颜色 */
            font-size: 17px; /* 字体大小 */
        }

        .demo input[type="submit"]:hover { /* 鼠标移入按钮范围时改变颜色 */
            background: #5599FF;
        }


        /* 关键部分 */
        .registering .demo-login, .demo-register {
            /* translate按哪个轴进行移动 水平方向：正右负左 垂直：负上正下 元素中心和父元素中心保持对齐 水平垂直居中 */
            transform: perspective(1000px) translate(-50%, -50%) rotateY(180deg);
            backface-visibility: hidden;
            transition: all 1.5s;
        }

        .registering .demo-register, .demo-login {
            transform: perspective(1000px) translate(-50%, -50%) rotateY(0deg);
            backface-visibility: hidden;
            transition: all 1.5s;
        }
    </style>
</head>
<body>

<main>
    <div class="content">
        <div class="demo demo-login">
            <a href="#" class="iconfont icon-guanbi close"></a>
            <ul class="clearfix">
                <li><a href="#" class="login active">登录</a></li>
                <li><a href="#" class="register active">注册</a></li>
            </ul>
            <div class="info"></div>
            <form action="/login" method="post">
                <div class="username">
                    <span class="iconfont icon-login2"></span>
                    <label>
                        <input class="text" type="text" name="username" placeholder="请输入用户名">
                    </label>
                </div>
                <div class="password">
                    <span class="iconfont icon-mima"></span>
                    <label>
                        <input class="text" type="password" name="password" placeholder="请输入密码">
                    </label>
                </div>
                <div class="input-field">
                    <input type="submit" value="登录">
                </div>
            </form>
        </div>

        <!-- 注册 -->
        <div class="demo demo-register">
            <a href="#" class="iconfont icon-guanbi close"></a>
            <ul class="clearfix">
                <li><a href="#" class="login active">登录</a></li>
                <li><a href="#" class="register active">注册</a></li>
            </ul>
            <div class="info"></div>
            <form action="/register" method="post">
                <div class="username">
                    <span class="iconfont icon-login2"></span>
                    <input class="text" type="text" name="username" placeholder="输入用户名">
                </div>
                <div class="password">
                    <span class="iconfont icon-mima"></span>
                    <input class="text" type="password" name="password" placeholder="输入密码">
                </div>
                <div class="password">
                    <span class="iconfont icon-mima"></span>
                    <input class="text" type="password" name="password" placeholder="再次输入密码">
                </div>
                <div class="input-field">
                    <input type="submit" value="注册">
                </div>
            </form>
        </div>
    </div>
</main>

<script>
    function $(selector) {
        return document.querySelector(selector);
    }

    // 事件代理
    $('.content').addEventListener('click', function (e) {
        e.stopPropagation();

        console.log(e.target);

        // 切换到登录状态
        if (e.target.classList.contains('login')) {
            console.log("切换到登录状态")
            $('.content li .register').classList.remove('active');
            $('main').classList.remove('registering');
        }

        // 切换到注册状态
        if (e.target.classList.contains('register')) {
            console.log("切换到注册状态")
            $('.content .demo-register li .login').classList.remove('active');
            $('main').classList.add('registering');
        }

        if (e.target.classList.contains('close')) {
            $('.content').style.display = 'none';
        }
    })

    // 点击空白处关闭
    document.addEventListener('click', function (e) {
        e.stopPropagation();
        $('.content').style.display = 'none';
    })

    // 初始默认为登录状态
    $('.content li .register').classList.remove('active');

</script>
</body>
</html>